<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button data-id="1">点击1</button>
    <button data-id="2">点击2</button>
    <button data-id="3">点击3</button>
    <script>
      {
          // 1 使用 forEach 遍历
          let arr = ['人偶','玩偶','哪吒']
          arr.forEach(function(item,index){
              console.log('值是：'+ item);
              console.log('索引是：'+index);
          })

          //es6的写法

          arr.forEach((item,index)=>{
              console.log('值是：'+ item);
              console.log('索引是：'+index);
          })

      }
      {
           // es6的过滤  filter  多个进去  出来是一个或者是一些满足条件为真的新数组 
        //    var arr = [12,66,4,88,3,7];
        //    let newArr = arr.filter((item,index)=>{
        //        if(item>10){
        //            return true
        //        }
        //    })
        //    console.log(newArr);
      

        // var arr= [12,66,4,88,3,7];
        // let newArr= arr.filter((item,index)=>{
        //     if(item>10&&item<30){
        //         return true 
        //     }
        // })
        // console.log(newArr);

        var arr = [12, 66, 4, 88, 3, 7];
        let newArr = arr.filter((item,index)=>item>10)
        console.log(newArr);
    }

    {
        // some 查找数组中是否有满足条件的元素  只要有1个满足就返回true
        var arr = [10,30,4]
        let newArr = arr.some((item,index)=>{
            if(item > 3){
                return true 
            }
        })

        console.log(newArr);
    }

    {
        //every  查找数组中是否有满足条件的元素
        // 如果每一个都满足条件 那么返回true 只要有1个不满足条件 那么返回false

        var arr = [10,30,4]

        // let newArr = arr.every((item,index)=>{
        //     if(item>3){
        //         return true 
        //     }
        // })
        // console.log(newArr);

        let newArr = arr.every(item => item>=30)
        console.log(newArr);
    }

    {
        //找到 符合条件的那个数   学一个方法   find  查找的意思   查到到符合条件的  返回当前这一项

        let arr = [10,30,4]
        let arr1 = [
            {name:'张三',id:1,price:100},
            {name:'李四',id:2,price:200},
            {name:'王五',id:3,price:300},
        ]
        // let newArr = arr.find((item,index)=>{
        //     if(item==30){
        //         return item 
        //     }
        // })
        // console.log(newArr);


        function getItem(id){
            let newArr = arr1.find((item,index)=>{
                if(item.id==id){
                    return item 
                }
            })
            console.log(newArr);
        }
        getItem(2)




        let btns=document.querySelectorAll("button")
        btns.forEach(item=>{
            console.log(item);
            item.onclick=function(){
                console.dir(this)
                let dataId=this.getAttribute('data-id')
                let datamyid=this.dataset.id

                console.log(dataId,datamyId);
                getItem(dataId)
            }
        })
        console.log(btns); //把一个伪数组变成真正的数组  from   

        // let totalPrice = btns.reduce((acc,current)=>{
        //     return acc+current.price
        // },0)

        // console.log(totalPrice);

        let trueArr = Array.from(btns);
        console.log(trueArr);

        let totalPrice = trueArr.reduce((acc,current)=>{
            console.log(acc,current);
            let dataId = current.getAttribute('data-id')
            // let datamyId=this.dataset.id
            return acc+parseInt(dataId)
        },0)
        console.log(totalPrice);
    }

    </script>
</body>
</html>